<template>
<!--  bg-rainbow 没有用-->
  <div class="bg-white">
    <ul>
      <!--            active 是自定义的样式-->
      <template v-for="(item) in items">
        <li @mouseover="selectStyle(item)"
            :class="{'active':item.active}"
            @mouseout="outStyle(item)"
            :key="'hover_'+item.id">
             <!-- v-bind:key="key" -->
          {{item.select}}
          <span class="icon" v-show="item.active">{{item.icon}}</span>
        </li>
      </template>
    </ul>
  </div>
</template>


<style>
/* @import "../css/style.css"; */
/*@import "../..//css//color.css";*/
@import "../../css/color.css";


/*@import "@/css/color.css";*/
/*这是错的*/


/*@import "//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";*/
</style>


<script>
// require("../../css/color.css");
  export default{
    name:"Hover",
    data(){
      return {
        active: false,
        items: [
          {id:1,select:'第一行',icon:1},
          {id:2,select:'第二行',icon:2},
          {id:3,select:'第三行',icon:3},
          {id:4,select:'第四行',icon:4}
        ]
      }
    },
    methods: {
      selectStyle (item) {
        // console.log("selectStyle");

        var _this=this;
          // console.log("_this")
          // console.log(_this)
          // _this 是被选中的
          // 防止没有渲染出来吗
        this.$nextTick(function () {
            // console.log("this");
            // console.log(this);
          this.items.forEach(function (eachItem) {
              // console.log("_this in");
              // console.log(_this);
              // this.$set(item,'active',false);
              // 这样会没有
            _this.$set(eachItem,'active',false);
              // console.log("this in");
              // console.log(this);
          });
            // this 代表vue
          this.$set(item,'active',true);
        });
      },
      outStyle (item) {
         // console.log("outStyle");
        this.$set(item,'active',false);
      }
    }
  }
// ————————————————
// 版权声明：本文为CSDN博主「sunshine_ping」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
// 原文链接：https://blog.csdn.net/sunshine_ping/article/details/80269707
</script>

<!-- 样式 -->
<style scoped>
  ul{
    overflow: hidden;
  }
  li{
    float: left;
    color:#000;
    transition: width .3s linear;
    outline: 1px solid red;
  }
  .active{
    /*color: red;*/
    /*background: chartreuse;*/

    color: deepskyblue;
    background: darkslateblue;
  }
  .icon{
    float: right;
    font-size: 12px;
  }
</style>

